<template>
  <div class="AnnouncementList">
    <div class='title'>
      <span></span>
      <span>公告</span>
    </div>
    <div class="subhead">
      <h3>{{data.title}}</h3>
      <span>{{data.pubTime}}</span>
    </div>
    <div id="announcementContent">
      {{data.contentDetail}}
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      data: ""
    };
  },
  created() {
    this.$route.params.id == 0 || this.$route.params.id
      ? localStorage.setItem("id", this.$route.params.id)
      : "";
    u.announcementDetails(
      {
        id: this.$route.params.id || localStorage.getItem("id")
      },
      data => {
        {
          if (data && data.code == 200) {
            this.data = data.data;
            $('#announcementContent').html(data.data.contentDetail)
          }
        }
      }
    );
  },
  methods: {

  }
};
</script>

<style lang="less" scoped>
.AnnouncementList {
  height: 100%;
  overflow: auto;
  background: white;
  .title {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #f4f5f6;
    span:nth-child(1) {
      margin: 0px 10px 0px 20px;
      margin-left: 20px;
      line-height: 50px;
      background: #ffb001;
      width: 5px;
      height: 18px;
      display: inline-block;
    }
  }
  .subhead {
    padding: 30px 0px 42px 0px;
    text-align: center;
    h3 {
      font-size: 20px;
      font-weight: normal;
      margin-bottom: 18px;
    }
    span {
      color: #999999;
      font-size: 14px;
    }
  }
  #announcementContent {
    // border: 1px solid #000;
    padding: 0px 30px;
    /*text-align: center;*/
  }
}
</style>
